<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-edit"></i> 配置管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>短信配置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-box">
            <el-form ref="edit" style="width:600px" :model="data" label-width="150px">
                <el-form-item label="开启短信">
                    <el-switch v-model="data.open" active-value="1" inactive-value="0"></el-switch>
                    <p class="tips">
                        <span>提示:</span> 不开启则无法使用短信验证码
                    </p>
                </el-form-item>
                <el-form-item label="短信签名" style="width:100%">
                    <el-input v-model="data.sign" maxlength="50" placeholder="请输入短信签名"></el-input>
                </el-form-item>
                <el-form-item label="应用AppId" style="width:100%">
                    <el-input v-model="data.appid" maxlength="50" placeholder="请输入应用AppId"></el-input>
                </el-form-item>
                <el-form-item label="应用AppKey" style="width:100%">
                    <el-input v-model="data.appkey" maxlength="50" placeholder="请输入应用AppKey"></el-input>
                </el-form-item>
                <el-form-item label="API秘钥SecretId" style="width:100%">
                    <el-input v-model="data.user_id" maxlength="50" placeholder="请输入API秘钥SecretId"></el-input>
                </el-form-item>
                <el-form-item label="API秘钥SecretKey" style="width:100%">
                    <el-input
                        v-model="data.user_key"
                        maxlength="50"
                        placeholder="请输入API秘钥SecretKey"
                    ></el-input>
                </el-form-item>
                <el-form-item label="验证码有效期" style="width:100%">
                    <el-input
                        type="number"
                        v-model="data.expire"
                        maxlength="50"
                        placeholder="请输入验证码有效期时间(秒)"
                    ></el-input>
                </el-form-item>
                <el-form-item label="验证码长度" style="width:100%">
                    <el-input
                        type="number"
                        v-model="data.len"
                        maxlength="50"
                        placeholder="请输入验证码长度"
                    ></el-input>
                </el-form-item>
                <el-form-item label="接入点域名" style="width:100%">
                    <el-input v-model="data.endpoint" maxlength="50" placeholder="请输入接入点域名"></el-input>
                </el-form-item>
                <el-form-item label="登录模板ID" style="width:100%">
                    <el-input
                        type="number"
                        v-model="data.login"
                        maxlength="50"
                        placeholder="请输入登录模板ID"
                    ></el-input>
                </el-form-item>
                <el-form-item label="注册模板ID" style="width:100%">
                    <el-input
                        type="number"
                        v-model="data.register"
                        maxlength="50"
                        placeholder="请输入注册模板ID"
                    ></el-input>
                </el-form-item>
                <el-form-item label="找回登录密码模板ID" style="width:100%">
                    <el-input
                        type="number"
                        v-model="data.forgot_login_password"
                        maxlength="50"
                        placeholder="请输入找回登录密码模板ID"
                    ></el-input>
                </el-form-item>
                <el-form-item label="找回支付密码模板ID" style="width:100%">
                    <el-input
                        type="number"
                        v-model="data.forgot_pay_password"
                        maxlength="50"
                        placeholder="请输入找回支付密码模板ID"
                    ></el-input>
                </el-form-item>
                <p class="tips">
                    <span>注意:</span> 此配置针对腾讯云短信，配置详情请
                    <a
                        target="_blank"
                        href="https://console.cloud.tencent.com/smsv2/app-manage"
                    >点击</a>
                </p>
                <div class="but-box">
                    <el-button type="primary" @click="saveData">保 存</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        open: '',
        appid: '',
        appkey: '',
        user_id: '',
        user_key: '',
        expire: '',
        len: '',
        endpoint: '',
        sign: '',
        login: '',
        register: '',
        forgot_login_password: '',
        forgot_pay_password: ''
      },
      testData: {
        content: '',
        title: ''
      },
      getInfo () {
        this.api.get('sms', {}, res => {
          this.data = res.data.info;
        });
      }
    }
  },

  created () {
    this.getInfo();
  },

  methods: {


    /**
     * 保存事件
     */
    saveData () {
      this.api.put('editSmsConfig', this.data, res => {
        this.getInfo();
        this.$message.success('保存成功');
      });
    },

  }
}
</script>

<style  scoped>
.form-box {
    min-width: 360px;
    width: 90%;
    min-height: 70vh;
    padding: 2vh 2vh;
    background: #ffffff;
}
.but-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: nowrap row;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.tips {
    width: auto;
    color: rgb(160, 160, 161);
    font-size: 12px;
}
.tips a {
    color: #70afef;
}
.tips > span {
    color: rgb(233, 142, 154);
}
</style>